* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #000;
}

a {
  /* 水平-垂直居中设置 */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  text-decoration: none;
  font-size: 24px;

  /* css函数将线性渐变设置为背景图像 */
  background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);

  /* 背景放大 */
  background-size: 400%;

  /* 设置盒子宽高、内部文字水平-垂直居中 */
  width: 400px;
  height: 100px;
  color: #fff;
  line-height: 100px;
  text-align: center;

  /* 字体大写 */
  text-transform: uppercase;

  border-radius: 50px;

  /* z-index 属性设置元素的堆叠顺序。 */
  /* 调节图层位置 */
  z-index: -1;
}

/* 用伪元素选择器给 a 标签加图层 */
a::before {
  /* 设置伪元素比原来的盒子大5px */
  content: "";
  position: absolute;
  left: -5px;
  top: -5px;
  right: -5px;
  bottom: -5px;

  background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
  border-radius: 50px;

  /* 设置滤镜：设置高斯模糊 */
  filter: blur(20px);

  /* 调节图层位置 */
  z-index: -1;
}

a:hover::before {
  animation: streamer 8s infinite;
}

a:hover {
  animation: streamer 8s infinite;
}

/**
* 流光动画
* 原理：先给背景水平放大 400%, 使用动画将背景水平缩小 -400% 
*/
@keyframes streamer {
  100% {
    background-position: -400% 0;
  }
}
